<template>
	<view>
		<dsl-navbar title="相册" bgTopImg="white" isBack=""></dsl-navbar>
		<view class="head_image">
			<image :src="topImage" mode="aspectFill" class="head_image" @click="previews(index,[topImage])"></image>
			<view class="head_cover">
				<image src="/static/user/modules/imghangguan.png" mode="" class="head_cover_icon"></image>
				<view class="head_cover_title">封面照</view>
			</view>
		</view>
		<view class="flex flex-wrap">
			<image :src="item.photo" mode="aspectFill" class="upload_image bg-gray" v-for="(item,index) in imgList"
				:key="index" @click.stop="setCover(item,index)">
			</image>
			<view class="upload_image rowsc align-center" @click="uploadImage()">
				+
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addPhotos,
		photoWall,
		setCover,
		removePhoto
	} from '@/common/path.js'
	import {
		updataImgList,
		preview
	} from '@/common/updataImgList.js'
	export default {
		data() {
			return {
				imgList: [], //相册
				topImage: '', //封面图
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {},
		onShow() {
			this.photoWall() //相册
		},
		methods: {
			//删除图片
			removePhoto(id) {
				this.Http.POST(removePhoto, {
						id: id
					})
					.then((res) => {
						this.photoWall()
					})
			},
			//图片上传
			uploadImage() {
				updataImgList().then(res => {
					if (res.code == 0) {
						console.log('[图片]', res);
						this.photo = res.data
						this.addPhotos()
					} else {
						this.$tools.showToast('图片上传失败请重新尝试')
					}
				})
			},
			//添加相册图片
			addPhotos() {
				let data = {
					photo: this.photo, //图片地址
				}
				this.Http.POST(addPhotos, data)
					.then((res) => {
						this.photoWall()
					})
			},
			//相册列表
			photoWall() {
				this.Http.POST(photoWall, {})
					.then((res) => {
						if (res.code == 0) {
							this.imgList = res.data
							console.log('[相册]', res.data);
							if (res.data) {
								this.topImage = res.data[0].photo
							} else {
								this.topImage = '/static/fengmian.webp'
							}
						}
					})
			},
			//图片预览
			previews(i, array) {
				preview(i, array)
			},
			//单一图片操作
			setCover(item,index) {
				let v = this
				uni.showActionSheet({
					itemList: ['设置封面图', '图片预览', '删除图片'],
					success: function(res) {
						if (res.tapIndex == 0) {//添加封面
							v.operationImage(item)
						} else if (res.tapIndex == 1) {//图片预览
							v.previews(index,[item.photo])
						} else {//删除
							v.removePhoto(item.id)

						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},

			//图片操作
			operationImage(item) {
				let data = {
					id: item.id
				}
				this.Http.POST(setCover, data)
					.then((res) => {
						if (res.code == 0) {
							this.topImage = item.photo
							this.$tools.showToast('设置成功')
						}
					})
			}

		},
		computed: {},
		components: {},
	}
</script>

<style lang="scss">
	.head_image {
		width: 750rpx;
		height: 627rpx;
		background-color: #EEEEEE;
		position: relative;
	}

	//封面按钮
	.head_cover {
		width: 189rpx;
		height: 62rpx;
		background: #EAA019;
		opacity: 1;
		border-radius: 0 99rpx 99rpx 0;
		display: flex;
		align-items: center;
		padding-left: 10rpx;
		position: absolute;
		bottom: 0;
		left: 0;


		.head_cover_title {
			font-size: 30rpx;
			padding-left: 10rpx;
		}

		.head_cover_icon {
			width: 42rpx;
			height: 42rpx;
		}
	}

	.upload_image {
		width: 168rpx;
		height: 168rpx;
		background: #FFFFFF;
		border: 2rpx solid #EDEEF3;
		color: #EDEEF3;
		font-size: 100rpx;
		opacity: 1;
		margin-left: 16rpx;
		margin-top: 20rpx;
	}
</style>
